<template>
	<view class="bg_color list_home">
		<Screen :screenData="screenData" :search="search" @changeScreenData="changeScreenData"></Screen>
		<view style="background-color: #fff; padding-top: 10rpx">
			<up-tabs
				:list="list1"
				@click="clickTabs"
				itemStyle="width:49%;height: 78rpx;" lineColor="#458CFF"
				:activeStyle="{
					color: '#458CFF',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
				}"
				lineWidth="68"
			></up-tabs>
		</view>
		<template v-if="listData.length">
			<Scroll ref="Scrolls" height="88vh" :isTriggered="isTriggered" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
				<Add :title="screenData.type == 0 ? '新增实有境内人口' : '新增实有境外人口'" @add="add"></Add>
				<view class="pdd32 content">
					<populationItem
						v-for="(item, index) in listData"
						:screenData="screenData.type"
						:field="field"
						v-bind="item"
						@operate="() => operate(item)"
						@clickItem="() => clickItem(item.id)"
					>
					</populationItem>
				</view>
			</Scroll>
		</template>
		<NoData v-else :show="!listData.length && (screenData.status != 0 || screenData.keywords != '')">
			<view class="font28">{{ screenData.type == 0 ? '还没有上报过实有境内人口!' : '还没有上报过实有境外人口!' }}</view>
			<view class="no_btn font28" @click="add">{{ screenData.type == 0 ? '新增实有境内人口' : '新增实有境外人口' }}</view>
		</NoData>
		<DeleteState v-if="isDelete" :success="success" @successReturn="fanhui" @failReturn="fanhui"></DeleteState>
	</view>
	<Operate :show="show" @editItem="editItem" @deleteItem="deleteItem" @close="show = false"></Operate>
	<DeleteModal :deleteShow="deleteShow" @confirm="confirm" @close="deleteShow = false"></DeleteModal>
</template>
<script>
const field = {
	name: 'name', //名字
	phone: 'phone', //电话
	age: 'age', //年龄
	sex: 'sex', //性别
	nationals: 'nationals_dictText', //民族
	portraitUrl: 'portraitUrl', //头像
	countryUrl: 'countryUrl', //国旗
	status: 'status', //状态
	actualPlace: 'actualPlace', //实际居住地
	id: 'id',
	userId: 'userId',
	country: 'country'
};
const search = {
	type: 'status',
	text: 'keywords',
	searchList: [
		{
			name: '全部',
			value: '0'
		},
		{
			name: '未核查',
			value: '1'
		},
		{
			name: '已核查',
			value: '2'
		},
		{
			name: '已上报',
			value: '3'
		}
	]
};
const list1 = reactive([
	{
		name: '境内人口',
		value: '0'
	},
	{
		name: '境外人口',
		value: '1'
	}
]);
</script>
<script setup>
import config from '@/config.js';
import Screen from 'com/Screen.vue';
import DeleteState from 'com/modal/DeleteState.vue';
import NoData from 'com/modal/NoData.vue';
import Operate from 'com/Operate.vue';
import ListITem from 'com/ListITem.vue';
import populationItem from 'com/populationItem.vue';
import DeleteModal from 'com/modal/DeleteModal.vue';
import Add from 'com/Add.vue';
import Scroll from 'com/Scroll.vue';
import Api from 'api';
import { useState } from 'hooks';
const [total, setTotal] = useState({});
const [operateItem, setOperateItem] = useState({});
const listData = ref([]);
const success = ref('');
const isTriggered = ref(false);
const deleteShow = ref(false);
const isDelete = ref(false);
const Scrolls = ref();
const api = new Api
onShow(async () => {
	getList();
	
});
const getList = async () => {
	const { records, total } = await api.list('domesticPopulation',screenData);
	listData.value = records;
	isTriggered.value = false;
	setTotal(total);
};
const show = ref(false);
const screenData = reactive({
	status: '0',
	keywords: '',
	pageNo: 1,
	pageSize: 10,
	type: '0'
});
const clickTabs = (item) => {
	screenData.type = item.value;
	screenData.pageNo = 1;
	screenData.pageSize = 10;
	getList();
	Scrolls.value.goTop();
};
const operate = (item) => {
	setOperateItem(item);
	show.value = true;
};
const fanhui = () => {
	isDelete.value = false;
	getList();
};
const changeScreenData = () => {
	screenData.pageSize = 10;
	getList();
};
const deleteItem = (id) => {
	deleteShow.value = true;
	show.value = false;
};
const editItem = () => {
	show.value = false;
	const id = unref(operateItem).id;
	const url = '/actual/add/' + (screenData.type == 0 ? 'abroad' : 'domestic') + '?id=' + id;
	uni.navigateTo({
		url
	});
	deleteShow.value = false;
};
const confirm = async () => {
	deleteShow.value = false;
	const id = unref(operateItem).id;
	const res = await api.deleteData('domesticPopulation',{
		id,
		type: screenData.type
	});
	success.value = res;
	isDelete.value = true;
};
const clickItem = (id) => {
	uni.navigateTo({
		url: '/actual/details/details?id=' + id + '&type=' + screenData.type
	});
};
const add = () => {
	const url = '/actual/add/' + (screenData.type == 0 ? 'abroad' : 'domestic');
	uni.navigateTo({
		url
	});
};
const scrolltolower = () => {
	console.log('上拉了');
	if (unref(total) <= listData.value.length) return;
	screenData.pageSize += 10;
	getList();
};
const refresherrefresh = () => {
	console.log('下拉了');
	isTriggered.value = true;
	screenData.pageSize = 10;
	getList();
};
</script>

<style lang="scss">
	.u-tabs__wrapper__nav__line{
		bottom:0px !important;
	}
</style>